<template>
    <header class="header">
        <img class="header-bg img" src="@/assets/imgs/common/topBg.jpg" alt="">
        <div class="header-line flex flex-align-center">
            <div class="time-box">
                {{ todayData }}
            </div>
        </div>
        <div class="header-con">
            <div class="header-con-logo-box">
                <div class="header-con-logo">
                    <img class="img" src="@/assets/imgs/common/logo.png" alt="">
                </div>
                <div class="header-con-search">
                    <search></search>
                </div>
            </div>
            <div class="header-nav-list flex flex-align-center flex-space-between">
                <div class="header-nav-item" v-for="(item,index) in navList" :key="item.id"
                     @click="navClick(index,item.is_jump,item.type,item.url,item.cate_id)"
                     :class="item.is_jump==1&&activeMenu == (item.type?'/pathPage/' + item.type + '/' + item.cate_id:'/')?'active':''">
                    {{item.name}}
                </div>
            </div>
            <!--        <el-menu :default-active="activeMenu" text-color="#fff" active-text-color="#1ED0F8" class="el-menu-demo" router mode="horizontal" @select="handleSelect">-->
            <!--          <el-menu-item :index="item.url"  v-for="item in navList" :key="item.url">{{item.text}}</el-menu-item>-->
            <!--        </el-menu>-->

        </div>
    </header>
</template>

<script>
    import search from "@/views/components/search";
    import { mapState } from "vuex";
    export default {
        name: "headerCom",
        components:{
            search
        },

        data() {
            return {
                activeIndex:0
            }
        },
        computed: {
            ...mapState({
                navList: state => state.navList,
            }),
            todayData() {
                var myDate = new Date;
                var year = myDate.getFullYear(); //获取当前年
                var mon = myDate.getMonth() + 1; //获取当前月
                var date = myDate.getDate(); //获取当前日
                var week = myDate.getDay();//获取当前星期
                var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
                return year + '年' + mon + '月' + date + '日' +  '   ' +  weeks[week]
            },
            activeMenu() {
                const route = this.$route;
                const {meta, path} = route;
                if(path.indexOf('pathPage')){
                    return path
                }else{
                    return '/'
                }
            },
        },
        created() {
        },
        mounted() {
        },
        methods: {
            navClick(index,jump,type,path,parentId) {
                this.$store.state.detailId = '-1';
                this.activeIndex = index;
                if(jump == 2){
                    // 跳转外链店址
                    if(path){
                        window.location.href = path
                    }
                }else{
                    if(type){
                        this.$router.push('/pathPage/' + type + '/' + parentId)
                    }else{
                        this.$router.push('/')
                    }
                }

            },
        }
    }
</script>

<style lang="scss" scoped>
    .header {
        .header-bg{
            position: absolute;
            height: auto;
            z-index: -1;
        }
        .header-line {
            width: 100%;
            height: 35px;
            background: linear-gradient(0deg, #245794, #2B699B);
            justify-content: flex-end;
            .time-box {
                margin-right: 20%;
                color: #fff;
            }
        }

        .header-con {
            width: 70%;
            margin: 35px auto 0;
            min-width: 1400px;
            .header-con-logo-box {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .header-con-logo {
                    width: 400px;
                }


            }

            .header-nav-list {
                margin-top: 20px;
                border-bottom: 2px solid rgba(195, 25, 36, 1);
                padding-bottom: 4px;
                position: -webkit-sticky;
                position: sticky;
                top: 30px;
                .header-nav-item {
                    flex: 1;
                    text-align: center;
                    padding: 10px;
                    color: rgba(36, 87, 148, 1);
                    font-size: 16px;
                    cursor: pointer;
                }

                .header-nav-item.active {
                    background: rgba(36, 87, 148, 1);
                    color: #fff;
                    font-weight: bold;
                }
            }
        }

    }
</style>